<template>
  <div class="animate-box" ref="box">
    <i class="animate-bg"></i>
    <div class="top-panel-box">
      <ContentTop />
    </div>
    <div class="child-page" :style="{ width: `${width}px`, height: `${height}px` }">
      <ContentMain />
      <div class="mts-data-box"></div>
    </div>
    <!-- <ContentBottom /> -->
  </div>
</template>

<script setup lang="ts">
import ContentTop from "./components/ContentTop.vue";
import ContentMain from "./components/ContentMain.vue";
import ContentBottom from "./components/ContentBottom.vue";

import { useElementSize } from "@vueuse/core";
import { Ref, ref, watchEffect } from "vue";

const box = ref(null);
const height: Ref<number> = ref(200);
const { width } = useElementSize(box);
watchEffect(() => {
  if (width.value < 384.375) {
    width.value = 384.375;
  }
  height.value = width.value / 2.13;
});
</script>

<style scoped>
.animate-box {
  width: 100%;
  height: 100%;
  min-height: 100%;
  position: relative;
}
.child-page{
    position: relative;
}
.animate-bg {
  transition: all 0.1s ease;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
  z-index: 0;
  background: url(../../assets/bg.png) 100%;
  background-size: cover;   
}
.top-panel-box{
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    position: relative;
}
</style>
